<template>
  <div class="section-two" ref="parent">
    <!-- <div class="border-row"></div>
    <div class="border-col"></div> -->
    
    <div class="section-header-two">用人单位活跃趋势</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
    <animae-jz :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getCompanyIn } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      listData:'',
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 10 + 'px',
        height: this.height-10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    
    this.$nextTick(_=>{
     this.init()
    })
  },
  methods: {
    init(){
      this.jz=false
      getCompanyIn(this.dateProp).then(({data:{data}})=>{
         this.listData=data
         this.jz=true
         this.drawChart(this.listData);
      })
    },
   drawChart(dataa) {
     console.log(this.listData)
      let option = {
        color:['#00bfc2'],
      tooltip: {
          trigger: 'axis',
          transitionDuration:0,
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#00bfc2'
              }
          }
      },
    grid: {
        left: '3%',
        top:'10%',
        right: '6%',
        bottom: '20%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#10bbcc'
                }
            },
            splitLine: {
                show: false
            },
            data:dataa.xaxis
        }
    ],
    yAxis: [
        {
            type: 'value',
             axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#10bbc2'
                }
            },
            splitLine: {
                show: false
            },
        }
    ],
    series: [
        {
            name: '数量',
            type: 'line',
            smooth: 0.5,
            areaStyle: {},
            data: dataa.value
        }
    ]
};
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
</style>